<template>
  <view class="creation-center">
    <!-- 顶部发布按钮 -->
    <view class="publish-btn" @click="navigateToEdit">
      <text class="btn-text">+ 发布</text>
    </view>
    
    <!-- 内容分类标签 -->
    <view class="tabs">
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'article' }"
        @click="activeTab = 'article'"
      >
        文章
      </view>
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'micro' }"
        @click="activeTab = 'micro'"
      >
        微头条
      </view>
    </view>
    
    <!-- 内容列表 -->
    <view class="content-list">
      <!-- 文章列表 -->
      <view v-if="activeTab === 'article'">
        <view 
          class="article-item" 
          v-for="(item, index) in articles" 
          :key="item.id"
        >
          <view class="article-content" @click="navigateToEdit(item.id, 'article')">
            <text class="article-title">{{ item.title }}</text>
            <text class="article-excerpt">{{ item.content.substring(0, 100) }}...</text>
            
            <view class="article-meta">
              <text class="publish-time">{{ formatTime(item.createTime) }}</text>
              <view class="article-stats">
                <text class="stat-item">{{ item.views }} 阅读</text>
                <text class="stat-item">{{ item.comments }} 评论</text>
              </view>
            </view>
          </view>
          
          <view class="item-actions">
            <view class="action-btn" @click.stop="shareContent(item.id, 'article')">
              <icon type="share" size="18" color="#666"></icon>
            </view>
            <view class="action-btn" @click.stop="deleteContent(item.id, 'article', index)">
              <icon type="clear" size="18" color="#666"></icon>
            </view>
          </view>
        </view>
        
        <!-- 文章空状态 -->
        <view class="empty-state" v-if="articles.length === 0">
          <image src="/static/images/article_empty.png" class="empty-img" mode="widthFix"></image>
          <text class="empty-text">暂无文章，点击发布按钮开始创作</text>
        </view>
      </view>
      
      <!-- 微头条列表 -->
      <view v-if="activeTab === 'micro'">
        <view 
          class="micro-item" 
          v-for="(item, index) in micros" 
          :key="item.id"
        >
          <view class="micro-content" @click="navigateToEdit(item.id, 'micro')">
            <text class="micro-text">{{ item.content }}</text>
            
            <!-- 微头条图片 -->
            <view class="micro-images" v-if="item.images && item.images.length > 0">
              <image 
                :src="imgUrl" 
                class="micro-img" 
                mode="widthFix"
                v-for="(imgUrl, imgIndex) in item.images" 
                :key="imgIndex"
              ></image>
            </view>
            
            <view class="micro-meta">
              <text class="publish-time">{{ formatTime(item.createTime) }}</text>
              <view class="micro-stats">
                <text class="stat-item">{{ item.views }} 阅读</text>
                <text class="stat-item">{{ item.likes }} 点赞</text>
                <text class="stat-item">{{ item.comments }} 评论</text>
              </view>
            </view>
          </view>
          
          <view class="item-actions">
            <view class="action-btn" @click.stop="shareContent(item.id, 'micro')">
              <icon type="share" size="18" color="#666"></icon>
            </view>
            <view class="action-btn" @click.stop="deleteContent(item.id, 'micro', index)">
              <icon type="clear" size="18" color="#666"></icon>
            </view>
          </view>
        </view>
        
        <!-- 微头条空状态 -->
        <view class="empty-state" v-if="micros.length === 0">
          <image src="/static/images/micro_empty.png" class="empty-img" mode="widthFix"></image>
          <text class="empty-text">暂无微头条，点击发布按钮开始创作</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'article', // 默认显示文章
      articles: [], // 文章列表
      micros: [] // 微头条列表
    };
  },
  
  onShow() {
    // 页面显示时加载数据
    this.loadArticles();
    this.loadMicros();
  },
  
  methods: {
    // 加载文章数据
    loadArticles() {
      const articles = uni.getStorageSync('creation_articles') || [];
      // 按创建时间排序，最新的在前
      this.articles = articles.sort((a, b) => b.createTime - a.createTime);
    },
    
    // 加载微头条数据
    loadMicros() {
      const micros = uni.getStorageSync('creation_micros') || [];
      // 按创建时间排序，最新的在前
      this.micros = micros.sort((a, b) => b.createTime - a.createTime);
    },
    
    // 格式化时间
    formatTime(timestamp) {
      const date = new Date(timestamp);
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      return `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;
    },
    
    // 跳转到编辑页面
    navigateToEdit(id, type) {
      if (id && type) {
        // 编辑已有内容
        uni.navigateTo({
          url: `/pages/ucenter/creationEdit?id=${id}&type=${type}`
        });
      } else {
        // 发布新内容
        uni.navigateTo({
          url: '/pages/ucenter/creationEdit'
        });
      }
    },
    
    // 分享内容
    shareContent(id, type) {
      uni.showActionSheet({
        itemList: ['分享到微信', '分享到朋友圈', '分享到QQ'],
        success: (res) => {
          let content = {};
          if (type === 'article') {
            content = this.articles.find(item => item.id === id);
          } else {
            content = this.micros.find(item => item.id === id);
          }
          
          uni.showToast({
            title: `已选择分享到${['微信', '朋友圈', 'QQ'][res.tapIndex]}`,
            icon: 'none',
            duration: 2000
          });
        }
      });
    },
    
    // 删除内容
    deleteContent(id, type, index) {
      uni.showModal({
        title: '确认删除',
        content: `确定要删除这篇${type === 'article' ? '文章' : '微头条'}吗？`,
        success: (res) => {
          if (res.confirm) {
            if (type === 'article') {
              // 删除文章
              this.articles.splice(index, 1);
              uni.setStorageSync('creation_articles', this.articles);
            } else {
              // 删除微头条
              this.micros.splice(index, 1);
              uni.setStorageSync('creation_micros', this.micros);
            }
            
            uni.showToast({
              title: '删除成功',
              icon: 'success',
              duration: 2000
            });
          }
        }
      });
    }
  }
};
</script>

<style scoped>
.creation-center {
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 发布按钮 */
.publish-btn {
  background-color: #007aff;
  color: #ffffff;
  position: fixed;
  right: 30px;
  bottom: 30px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 122, 255, 0.4);
  z-index: 99;
}

.btn-text {
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
}

/* 标签页样式 */
.tabs {
  display: flex;
  background-color: #ffffff;
  border-bottom: 1px solid #eee;
  padding: 0 16px;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 16px 0;
  font-size: 16px;
  color: #666;
  position: relative;
}

.tab-item.active {
  color: #007aff;
  font-weight: bold;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 3px;
  background-color: #007aff;
  border-radius: 3px;
}

/* 内容列表样式 */
.content-list {
  padding: 10px 16px;
}

/* 文章项样式 */
.article-item {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.article-content {
  flex: 1;
}

.article-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 8px;
}

.article-excerpt {
  font-size: 14px;
  color: #666;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
}

.article-meta {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 微头条项样式 */
.micro-item {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.micro-content {
  flex: 1;
}

.micro-text {
  font-size: 15px;
  color: #333;
  line-height: 1.6;
}

.micro-images {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  gap: 5px;
}

.micro-img {
  width: 80px;
  height: 80px;
  border-radius: 4px;
  object-fit: cover;
}

.micro-meta {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 公共元数据样式 */
.publish-time {
  font-size: 12px;
  color: #999;
}

.article-stats, .micro-stats {
  display: flex;
  gap: 12px;
}

.stat-item {
  font-size: 12px;
  color: #999;
}

/* 操作按钮 */
.item-actions {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-left: 10px;
}

.action-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 空状态样式 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 0;
}

.empty-img {
  width: 120px;
  height: 120px;
  margin-bottom: 20px;
}

.empty-text {
  font-size: 15px;
  color: #999;
  text-align: center;
}
</style>
    